<script>
// 渠道列表页，弹窗会另抽出组件
import { defineComponent } from 'vue'
export default defineComponent({
	name: 'WeworkQrList'
})
</script>
<script setup>
import { reqQrGroupList, reqQrGroupUpdate, reqQrList,postIntelligentdelete } from '@/api'
import MyIcon from '@/components/my-icon/index.vue'
import UpdateGroupDialog from './list/updateGroupDialog.vue'
import DeleGroupDialogue from './list/deleGroupDialogue.vue'
import custormerDrawer from './list/detailDrawer.vue'
import { ref } from 'vue'
// group
const custormerDrawerRef = ref(null)
const drawer = ref(false)
const rowClick = (row, column, event) => {
	drawer.value = true
	console.log(row,'sdfsdfsdf')
	custormerDrawerRef.value.show(row.id)
}
const changeDrawer = (visible) => {
	drawer.value = visible
}



const isRefresh = ref(true)
const handleRefresh = () => {
	isRefresh.value = false
	isRefresh.value = true
}
const emits = defineEmits(['showEditQr','qrToData'])
const groupList = ref([])
const groupName = ref('')
const updateGroupDialog = ref(null)
const deleGroupDialogue = ref(null)
const isShowAddGroupName = ref(false)
const activeGroupIndex = ref(0)
const hoverGroupIndex = ref('')
// table
const qrList = ref([])
const multipleTableRef = ref()
const multipleSelection = ref([])
const selectAll = ref(false)
const total = ref(0)

const newQr = () => {}
const handleChangegroupName = async () => {
	const r = reqQrGroupUpdate({ name: groupName.value })
	if (r) {
		ElMessage.success('请求成功')
		getGroupList()
	}
}
// const getqrList = async () => {
// 	console.log(groupList._value, activeGroupIndex.value, '获取表格数据')
// }
const getqrLists=(val,index)=>{
	activeGroupIndex.value=index
	getqrList()
}
const getqrList = async (val,index) => {
	console.log(val)
	// console.log('获取表格数据', groupList._value[activeGroupIndex.value]['id'])

	const r = await reqQrList({
		page: pageNo.value,
		size: 10,
		groupid: groupList._value[activeGroupIndex.value]['id']
	})
	if (r) {
		qrList._value = r.data.item
		total.value = r.data.count
	}
}
const pageNo = ref(1)
const getGroupList = async () => {
	const r = await reqQrGroupList()
	groupList._value = r.data
	handleRefresh()
}
const getData = async () => {
	await getGroupList()
	getqrList()
}
getData()
const handleCurrentChange = (val) => {
	console.log(`current page: ${val}分页请求接口`)
	pageNo.value = val
	getqrList()
}

const showDialog = (name, val) => {
	console.log(name, val)
	switch (name) {
		case 'updateGroup':
			updateGroupDialog.value.show(val)
			break
		case 'deleGroup':
			deleGroupDialogue.value.show(val)
			break
	}
}
const handle = (name, val) => {
	console.log('操作', name, val)
	switch (name) {
		case 'data':
			emits('qrToData',val.id)
			updateGroupDialog.value.show(val)
			break
		case 'detail':
			rowClick(val)
			break
		case 'download':
			break
		case 'update':
			updateGroupDialog.value.show(val)
			break
		case 'delete':
			postIntelligentdelete({id:val.id}).then(res=>{
			ElMessage({
				message: res.msg,
				type: 'success',
			})
			getGroupList()
			getqrList()
		})
			break
	}
	
}
const select = (name) => {
	switch (name) {
		case 'all':
			break
		case 'current':
			break
	}
}
const handleSelectAll = () => {
	multipleTableRef.value.clearSelection()
	if (selectAll.value) {
		qrList.value.forEach((row) => {
			multipleTableRef.value.toggleRowSelection(row, undefined)
		})
	}
}

const handleSelectionChange = (val) => {
	multipleSelection.value = val
	if (multipleSelection.value.length == qrList.value.length) {
		selectAll.value = true
	} else {
		selectAll.value = false
	}
}
</script>

<template>
	<div class="app-container">
	<custormerDrawer ref="custormerDrawerRef" :drawer="drawer" @changeDrawer="changeDrawer" />
		<div>
			<el-button class="app-btn" type="primary" @click="emits('showEditQr')">新建活码</el-button>
			
		</div>
		<div class="app-gap-block-top qr-main">
			<div class="qr-main-left-nav app-container-radius">
				<div class="app-title-underline app-flex-left app-container" @click="isShowAddGroupName = true">
					<MyIcon class="app-icon app-pointer" name="AntDesignPlusSquare" />
					<span class="app-gap-words-left-s app-pointer">添加分组</span>
				</div>
				<div class="">
					<div v-show="isShowAddGroupName" class="app-container-side app-gap-block-top">
						<el-input
							v-on:keyup.enter="handleChangegroupName"
							v-model="groupName"
							maxlength="18"
							placeholder="输入名称后回车"
							show-word-limit
							type="text"
						/>
					</div>
					<div
						v-if="isRefresh"
						class="app-gap-block-top"
						:class="isShowAddGroupName ? 'cell-list-show-input' : 'cell-list'"
					>
						
					<div v-if="isRefresh" class="app-gap-block-top"
						:class="isShowAddGroupName ? 'cell-list-show-input' : 'cell-list'">
						<div @mouseover="hoverGroupIndex = index" @click="getqrLists(item,index)" activeGroupIndex="index"
							isShowAddGroupName="false" :class="[
								activeGroupIndex == index ? 'left-bar-cell-active' : 'left-bar-cell',
								hoverGroupIndex == index ? 'cell-hover' : ''
							]"
							v-for="(item, index) in groupList"
							:key="index"
						>
							<MyIcon class="app-icon file-icon" name="File" />
							<div class="app-flex-2 cell-width">
								<span class="cell-name">{{ item.name }}</span>
								<span class="cell-count">{{ item.qr_number }}</span>
							</div>
							<el-popover
								popper-style="padding: 0px;min-width:0px"
								v-if="hoverGroupIndex == index && index != 0 && index != 1"
								placement="right"
								:width="100"
								trigger="hover"
							>
								<div>
									<div class="app-hover-cell" @click="showDialog('updateGroup', item)">修改名称</div>
									<div class="app-hover-cell" @click="showDialog('deleGroup', item)">删除分组</div>
								</div>
								<template #reference>
									<div class="cell-more">
										<MyIcon class="app-icon more-icon" name="MoreVertical" />
									</div>
								</template>
							</el-popover>
						</div>
					</div>
				</div>
			</div>
			
		</div>
		<div class="select-table-body app-container-radius">
				<!-- <div class="table-head app-flex-left">
					<el-checkbox v-model="selectAll" @change="handleSelectAll" size="large" />
					<el-button :disabled="multipleSelection.length == 0" class="app-btn app-gap-words-left" @click="newQr"
						>批量创建活码
					</el-button>
					<el-button :disabled="multipleSelection.length == 0" class="app-btn" @click="newQr">批量修改</el-button>
					<el-button :disabled="multipleSelection.length == 0" class="app-btn" @click="newQr">批量分组</el-button>
					<el-button :disabled="multipleSelection.length == 0" class="app-btn" @click="newQr">批量下载</el-button>
				</div>
				<el-table
					class="app-select-table app-select-table-wh app-container-radius"
					ref="multipleTableRef"
					:data="qrList"
					style="width: 100%"
					@selection-change="handleSelectionChange"
				>
				</div> -->
				<el-table 	@row-click="rowClick" class="app-select-table app-select-table-wh app-container-radius" ref="multipleTableRef"
					:data="qrList" style="width: 100%" @selection-change="handleSelectionChange">
					<!-- <el-table-column type="selection" fixed="left"> </el-table-column> -->
					<el-table-column width="140" fixed="left" prop="qrCode">
						<template #header>
							<div class="app-flex-left">
								<span class="primary-font">全部二维码</span>
								<!-- <el-popover popper-style="padding: 0px;min-width:0px" placement="right" :width="100" trigger="hover">
									<div>
										<div class="app-hover-cell" @click="select('all')">全部</div>
										<div class="app-hover-cell" @click="select('current')">当前页面</div>
									</div>
									<template #reference>
										<MyIcon class="app-down-icon primary-font" name="Down" />
									</template>
								</el-popover> -->
							</div>
						</template>

						<template #default="scope">
							<el-image :src="scope.row.qr_code" class="a-w100h100" />
						</template>
					</el-table-column>
					<el-table-column prop="name" label="名称" width="140" align="left" />
					<el-table-column prop="scan_number " width="140" align="left">
						<template #header>
							<div class="app-flex-left">
								<span class="">扫码添加次数</span>
								<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
									<div class="app-container">统计添加渠道码的人次，若客户重复添加将不会重复计数</div>
									<template #reference>
										<MyIcon class="question-icon" name="Question" />
									</template>
								</el-popover>
							</div>
						</template>
						<template #default="scope">
							{{ scope.row.scan_number }}
						</template>
					</el-table-column>
					<el-table-column prop="create_time" label="创建时间" width="140" align="left" />
					<el-table-column prop="staff " width="" align="left">
						<template #header>
							<div class="app-flex-left">
								<span class="">使用成员</span>
								<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
									<div class="app-container app-flex-left">
										<div class="app-words-box">
											<div class="app-flex-left">
												<MyIcon class="app-down-icon primary-font" name="Person" />
												<span class="app-gap-words-left-xs">上线状态</span>
											</div>
										</div>
										<div class="app-disable app-words-box app-gap-words-left">
											<div class="app-flex-left">
												<MyIcon class="app-down-icon primary-font" name="Person" />
												<span class="app-gap-words-left-xs">下线状态</span>
											</div>
										</div>
									</div>
									<template #reference>
										<MyIcon class="question-icon" name="Question" />
									</template>
								</el-popover>
							</div>
						</template>
						<template #default="scope">
							<div class="app-words-box-set">
								<div
									class="app-words-box-item app-gap-words-left"
									v-for="(item, index) in scope.row.staffname"
									:key="index"
								>
									<div class="app-words-box" v-if="item.show">
										<div class="app-flex-left">
											<MyIcon class="app-down-icon primary-font" name="Person" />
											<span class="app-gap-words-left-xs">{{ item.name }}</span>
										</div>
									</div>
									<div v-else class="app-disable app-words-box">
										<div class="app-flex-left">
											<MyIcon class="app-down-icon primary-font" name="Person" />
											<span class="app-gap-words-left-xs">{{ item.name }}</span>
										</div>
									</div>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="otherstaff " width="" align="left">
						<template #header>
							<div class="app-flex-left">
								<span class="">备用成员</span>
								<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
									<div class="app-container">统计添加渠道码的人次，若客户重复添加将不会重复计数</div>
									<template #reference>
										<MyIcon class="question-icon" name="Question" />
									</template>
								</el-popover>
							</div>
						</template>
						<template #default="scope">
							<div class="app-words-box-set">
								<div
									class="app-words-box-item app-gap-words-left"
									v-for="(item, index) in scope.row.staff_standby_name"
									:key="index"
								>
									<div class="app-words-box" >
										<div class="app-flex-left">
											<MyIcon class="app-down-icon primary-font" name="Person" />
											<span class="app-gap-words-left-xs">{{ item }}</span>
										</div>
									</div>
									<!-- v-if="item.show" -->
									<!-- <div v-else class="app-disable app-words-box">
										<div class="app-flex-left">
											<MyIcon class="app-down-icon primary-font" name="Person" />
											<span class="app-gap-words-left-xs">{{ item }}</span>
										</div>
									</div> -->
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column width="240" fixed="right">
						<template #header>
							<span class="primary-font">操作</span>
						</template>
						<template #default="scope">
							<span class="primary-font pointer" @click="handle('data', scope.row)">数据统计</span>
							<span class="weak-grey-font app-gap-words-left-s">|</span>
							<span class="primary-font app-gap-words-left-s pointer" @click="handle('detail', scope.row)">详情</span>
							<span class="weak-grey-font app-gap-words-left-s">|</span>
							<!-- <span class="primary-font app-gap-words-left-s pointer" @click="handle('download', scope.row)">下载</span>
							<span class="weak-grey-font app-gap-words-left-s">|</span> -->
							<el-popover popper-style="padding: 0px;min-width:0px" placement="left" :width="100" trigger="hover">
								<div>
									<div class="app-hover-cell" @click="emits('showEditQr', scope.row)">修改</div>
									<div class="app-hover-cell" @click="handle('delete', scope.row)">删除</div>
								</div>
								<template #reference>
									<span class="primary-font app-gap-words-left-s pointer">编辑</span>
								</template>
							</el-popover>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					class="app-page"
					@current-change="handleCurrentChange"
					background
					layout="prev, pager, next"
					:total="total"
				/>
			</div>
		<UpdateGroupDialog ref="updateGroupDialog" @diaUpdate="getGroupList" />
		<DeleGroupDialogue ref="deleGroupDialogue" @diaUpdate="getGroupList" />
	</div>
	</div>
</template>
<style lang="scss">
@import url('../../../style/app-component.scss');
@import '../../../style/mixin.scss';
.pointer {
	cursor: pointer;
}

.qr-main {
	height: calc(100vh - 56px - 110px - 22px - 70px + 38px);
	display: flex;

	.file-icon {
		font-size: var(--app-font-6);
		font-weight: 800;
		color: var(--el-color-primary);
		margin-right: var(--app-block-margin);
	}

	.qr-main-left-nav {
		width: 220px;
		background: var(--app-white-back-color);
		margin-right: var(--app-block-margin);

		.qr-main-left-scroll {
			@include scrollBar;
		}
	}

	.cell-list {
		height: calc(100vh - 262px - 70px);
		overflow: auto;
		@include scrollBar;
		overflow: auto;
	}

	.cell-list-show-input {
		height: calc(100vh - 70px - 262px - var(--app-btn-height) - var(--app-container-padding) + 8px);
		overflow: auto;
		@include scrollBar;
		overflow: auto;
	}

	// table带check的样式
}

.table-head {
	height: 60px;
	margin-left: 14px;
}

.app-select-table-wh {
	height: calc(100vh - 70px - 64px - 110px - 22px - 80px - 20px - 50px + 38px);
	@include scrollBar;
	overflow: auto;
}

.select-table-body {
	background: var(--app-white-back-color);
	height: calc(100vh - 70px - 64px - 110px - 22px - 50px + 38px);
	width: calc(100% - 224px);
	padding: var(--app-container-padding);
}
</style>
